<!DOCTYPE html>
<html lang="en_US">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Stateright Explorer</title>
    <link rel="stylesheet" href="app.css" />
    <script src="knockout-3.5.0.js"></script>
</head>
<body class="color-med" data-bind="event: {keydown: onKeyDown}">
    <header class="header color-dark">
        <h1><a href="/">Stateright Explorer</a></h1>
        <span class="header-links-container">
            <a href="https://docs.rs/stateright">API Docs</a>
            <a href="https://www.stateright.rs">Book</a>
            <a href="https://crates.io/crates/stateright">Crate</a>
            <a href="https://github.com/stateright/stateright">Source</a>
        </span>
    </header>
    <main class="main-flex">
        <nav class="main-flex-left">
            <div class="heading-with-controls">
            <h2>Status</h2>
            <button type="submit" onclick="runToCompletion()">Run to completion</button>
            </div>
            <ul data-bind="with: status">
                <li>
                    <label>Model:</label>
                    <span data-bind="text: model">MODEL</span>
                </li>
                <li>
                    <label>States:</label>
                    <span data-bind="text: stateCount">STATE COUNT</span>
                </li>
                <li>
                    <label>Unique States:</label>
                    <span data-bind="text: uniqueStateCount">UNIQUE STATE COUNT</span>
                </li>
                <li>
                    <label>Max Depth:</label>
                    <span data-bind="text: maxDepth">MAX DEPTH</span>
                </li>
                <li>
                    <label>Progress:</label>
                    <span data-bind="text: progress,
                                     attr: {title: 'Recent path: ' + recentPath}">PROGRESS</span>
                </li>
            </ul>

            <div class="heading-with-controls">
                <h2>Properties</h2>
                <label>
                    <input type="checkbox" data-bind="checked: showCurrentStateProperties" />
                    Current state?
                </label>
                <label>
                    <input type="checkbox" data-bind="checked: showPerStateProperties" />
                    Per-state?
                </label>
            </div>

            <h3>Global</h3>
            <ul data-bind="foreach: {
                                                data: status().properties,
                                                as: 'p',
                                                noChildContext: true,
                                              }">
                <li>
                    <!-- ko if: p.discoveryPath -->
                        <b data-bind="text: p.summary">SUMMARY</b>
                        <a class="font-code" href="#"
                           data-bind="attr: {href: '#/steps/' + p.discoveryPath},
                                      text: p.expectation + ' ' + p.name">PROPERTY</a>
                    <!-- /ko -->
                    <!-- ko if: !p.discoveryPath -->
                        <b data-bind="text: p.summary">SUMMARY</b>
                        <span class="font-code"
                              data-bind="text: p.expectation + ' ' + p.name">PROPERTY</span>
                    <!-- /ko -->
                </li>
            </ul>

            <!-- ko if: showCurrentStateProperties -->
            <h3>Current state</h3>
            <ul data-bind="foreach: {
                                                data: selectedStep().properties,
                                                as: 'p',
                                                noChildContext: true,
                                              }">
                <li>
                    <b data-bind="text: p.icon + ' ' + p.summary">SUMMARY</b>
                    <span class="font-code"
                          data-bind="text: p.expectation + ' ' + p.name">PROPERTY</span>
                </li>
            </ul>
            <!-- /ko -->

            <h2>Path of Actions</h2>
            <ol class="path-list" data-bind="foreach: farthestStep().pathSteps()">
                <li>
                    <a class="font-code" href="#"
                       data-bind="attr: {href: $root.farthestStep().computeUriWithOffset($root.farthestStep().pathSteps().length - $index() - 1)},
                                  css: {
                                    'is-selected-state': $data == $root.selectedStep(),
                                    'is-same-state': $data != $root.selectedStep()
                                                  && $root.isSameStateAsSelected($data)
                                  },
                                  text: ($root.showPerStateProperties() ? $data.icons + ' ' : '') + $data.action">PREV</a>
                </li>
            </ol>

            <h2>Next Action Choices</h2>
            <ul data-bind="foreach: selectedStep().nextSteps">
                <li>
                    <a class="font-code" href="#"
                       data-bind="attr: {
                                    href: $data.state ? '#/steps' + $data.path : undefined,
                                    title: $data.isIgnored ? 'Action ignored by model' : undefined,
                                  },
                                  css: {
                                    'is-ignored': $data.isIgnored,
                                    'is-same-state': $root.isSameStateAsSelected($data),
                                  },
                                  text: ($root.showPerStateProperties() ? $data.icons + ' ' : '') + $data.action">NEXT</a>
                </li>
            </ul>
        </nav>
        <section class="main-flex-right">
            <div class="heading-with-controls">
                <h2>Current State</h2>
                <label>
                    <input type="checkbox" data-bind="checked: isCompleteState" />
                    Complete State?
                </label>
                <label>
                    <input type="checkbox" data-bind="checked: isCompact" />
                    Compact?
                </label>
            </div>
            <div class="color-dark font-code hscroll margin-bottom-small padding-small rounded"
                 data-bind="html: selectedStep().svg, visible: selectedStep().svg">SVG</div>
            <div class="font-code font-small color-dark margin-bottom-small padding-small rounded"
                 data-bind="style: { 'white-space': isCompact() ? 'normal' : 'pre-wrap' },
                            text: isCompleteState()
                                  ? selectedStep().state
                                  : selectedStep().outcome || selectedStep().state">CURR STATE</div>
        </section>
    </main>
    <script src="app.js"></script>
</body>
</html>
